<template>
    <div class="bg_cyan">
        <article :class="$root.platformClass.topArticle">
            <!-- 头部 -->
            <header class="headBar ta_av d-box">
                <aside class="asideBox ta_r" v-on:click="goBack">
                    <i class="i-back"></i>
                </aside>
                <div class="headTitle b-flex">{{ title }}</div>
                <aside class="asideBox">
                    <div></div>
                </aside>
            </header>
            <!-- 主体 -->
            <section class="mainPage attIntro">
            <div class="content">
                <h1>移动打卡，企业的考勤利器</h1>
                <ol class="txtCon ta_c mt_25">
                <li class="">让员工秒秒钟打卡成功，告别考勤机</li>
                <li class="">独家移动基站定位技术，杜绝模拟位置作弊</li>
                </ol>
            </div>
            <div class="imgCon"><img src="../../static/images/others/others_02.png" width="295" alt="考勤组打卡介绍"></div>
            <div class="btnCon ta_c">
                <div class="btn" @click="enterToUse">立即体验</div>
            </div>
            </section>
        </article>
    </div>
</template>

<script>
export default {
    name: 'AttendenceEx',
    data () {
        return {
            title: "考勤打卡"
        }
    },
    methods: {
        goBack () {
            this.$root.backToHost()
        },
        enterToUse () {
            if (!Number(this.$root.myGroupInfo.attendanceId)) {  // 不在考勤组
                this.$router.replace({ name: 'UnAvailable' })
            } else {                                     // 已在考勤组
                this.$router.replace({ name: 'AttendanceCheck' })
            }
        }
    }
}
</script>
<style scoped>
    .attIntro {
        padding-top:44px;
    }
</style>


